<template>
	<view>
		<waterfallsFlow  ref="waterfallsFlow"  @wapper-lick='getnav' :list="list"  imageSrcKey='goods_img'>
						 <!--  #ifdef  MP-WEIXIN -->
						  <view v-for="(item, index) of list" :key="index" slot="slot{{index}}">
						    <view class="cnt">
						    <view class="bottom_info">
						    	<view class="bottom_left">
						    		<avatar :img="item.shop_logo" :size="20" ></avatar>
						    		<view>{{item.shop_name}}</view>
						    	</view>
						    	<view class="bottom_right">
						    		{{item.praise_num||0}}
						    	</view>
						    </view>
						    <view class="circle_box" v-if="item.circle_id!=0" @click.stop='getNavCircle(item.circle_id)'>
						    	<view class="circle_top">
						    		<image src="../static/images/circle_address.png"></image>
						    		<view>{{item.circle_name}}</view>
						    	</view>
						    	<view class="circle_bottom">
						    		<view>{{item.label_name}}</view>
						    		<view class="walp">{{item.circle_likenum}}人想去</view>
						    	</view>
						    </view>
						    </view>
						    </view>
						  <!--  #endif -->
						
						  <!-- #ifndef  MP-WEIXIN -->
					  <!-- app、h5 自定义内容 -->
					  <template v-slot:default="item">
						    <view class="cnt">
								<view class="bottom_info">
									<view class="bottom_left">
										<avatar :img="item.shop_logo" :size="20" ></avatar>
										<view>{{item.shop_name}}</view>
									</view>
									<view class="bottom_right">
										{{item.praise_num||0}}
									</view>
								</view>
								<view class="circle_box" v-if="item.circle_id!=0" @click.stop='getNavCircle(item.circle_id)'>
									<view class="circle_top">
										<image src="../static/images/circle_address.png"></image>
										<view>{{item.circle_name}}</view>
									</view>
									<view class="circle_bottom">
										<view>{{item.label_name}}</view>
										<view class="walp">{{item.circle_likenum}}人想去</view>
									</view>
								</view>
							</view>
						  </template>
						<!-- #endif -->
		</waterfallsFlow>
	</view>
</template>

<script>
import waterfallsFlow from "./maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
import avatar from './avatar.vue'
export default {
	name:"videoTabList",
	data() {
		return {
			
		};
	},
	props:[
		'list'
	],
	components:{
		waterfallsFlow,
		avatar
	},
	watch:{
		list(list){
			if(list.length == 0){
						this.$refs.waterfallsFlow.refresh();
			}
		}
	},
	methods:{
		refresh(){
			this.$refs.waterfallsFlow.refresh();
		},
		getnav(e){
			console.log(e)
			let index =this.list.indexOf(this.list.find(item=>{
				return item.id == e.id
			})) 
			console.log(index)
			this.$emit('playVideo',index)
		},
		getNavCircle(id){
			console.log(id)
			uni.navigateTo({
				url:'../../pagesC/home/shopDetail/shopDetail?id='+id,
				fail:err=>{
					console.log(err)
				}
			})
		}
	}
}
</script>

<style lang="less">
	.cnt{
		position: relative;
	}
	.bottom_info{
		display: flex;
		position: absolute;
		left: 0;
		top: -55rpx;
		width: 100%;
		padding: 0 12rpx;
		align-items: center;
		justify-content: space-between;
		border-radius: 0rpx 0rpx 5rpx 5rpx;
		height: 55rpx;
		background-color: rgba(#000000,0.3);
		color: #fff;
		/deep/.u-avatar__img{
			width: 40rpx;
			height: 40rpx;
		}
		.bottom_left{
			display: flex;
			align-items: center;
		}
	}
	.circle_box{
		height: 100rpx;
		background-color: #0f111d;
		.circle_top{
			display: flex;
			font-size: 24rpx;
			color: #fff;
			padding: 10rpx 15rpx;
			view{
				margin:0rpx 12rpx 0 12rpx;
			}
			image{
				width: 30rpx;
				height: 30rpx;
				background-color: #13a62b;
				border-radius: 5rpx;
				margin-top: 5rpx;
			}
		}
		.circle_bottom{
			display: flex;
			color: #999999;
			padding: 0rpx 15rpx;
			align-items: center;
			.walp{
				padding-left: 15rpx;
				position: relative;
				&::after{
					position: absolute;
					content: '';
					width: 1px;
					height: 30rpx;
					left: 5rpx;
					background-color: #999;
					bottom: 2rpx;
				}
			}
		}
		
	}
</style>
